<template>
	<view class="sq">
	<!-- #ifdef H5 -->
	
	<Tou :show="false"></Tou>
	<!-- #endif -->
		<!-- 登录 -->
		<scroll-view :scroll-y=scoll>
			<view class="denglu">
				<view class="baoguo">
					<view class="anniu" @tap="denglu">
						登录  /  注册
					</view>
					<view class="wenzi">
						注册即可领取绘画素材、教程，免费学画画
					</view>
				</view>
				
			</view>
			<view class="mubu" v-show="!scoll" @tap="off"  >
				<view class="user" @click.stop="scoll=false">
					<text class="cha" @click.stop="scoll=true">x</text>
					<denglu></denglu>
				</view>
			</view>
			 <!-- 图片 -->
			 <view class="nr" :class="{ding:!scoll}">
			 	<view class="imgs flex">
			 					 <image v-for="(item,index) in imgs1" :key="index" :src="item.url" mode=""></image>
			 				
			 		
			 	</view>
			 	<!-- 专业规划 -->
			 	<view class="guihua flex">
			 		<text class="iconfont icon-xingqiu"></text>专业规划，跟着大咖学画画
			 					<button size="mini" type="primary" >立即咨询</button>
			 	</view>
			 	<!-- 课程表 -->
			 	<view class="kecheng">
			 		<view class="ys fl" v-for="(item,index) in list">
			 						<text class="iconfont" :class="item.icon"  ></text> {{item.text}}
			 			
			 		</view>
			 	</view>
			 	<view class="imges">
			 		<image src="https://assets-cdn.lanqb.com/imgv3_m/ucenter2212/ucenter-3-img.png" mode=""></image>
			 	</view>
			 </view>
			
		</scroll-view>

		
	</view>
</template>

<script>
	import Tou from "@/common/nav-tar.vue"
	import denglu from "@/components/shequ/denglu.vue"
	// import Biaoti from "@/components/biaoti.vue"
	export default {
		data() {
			return {
				scoll:true,
				imgs1:[
					{id:0,url:'https://assets-cdn.lanqb.com/imgv3_m/ucenter2212/ucenter-2-img2.png'},
					{id:1,url:'https://assets-cdn.lanqb.com/imgv3_m/ucenter2212/ucenter-2-img1.png'},
				],
				list:[
					{id:0,text:'我的课程', icon:'icon-guanzhu'},
					{id:1,text:'我的订单', icon:'icon-pinglun'},
					{id:2,text:'我的收藏', icon:'icon-fenxiang'},
					{id:3,text:'我的优惠卷', icon:'icon-jishiben'},
					{id:4,text:'意见反馈', icon:'icon-dianzan'},
				]
			}
		},
		methods: {
			denglu(){
				this.scoll=false
			},
			off(){
				this.scoll=true
				console.log(123);
			

			}
			
		},
		components:{
			Tou,
			denglu,
		}
	}
</script>

<style lang="scss" scoped>
	.nr{
		padding: 24rpx 20rpx 42rpx;
		
	}
	.ding{
		position: fixed;
	}
.denglu{
	width: 100%;
	height: 232rpx;

	background-image: url('https://assets-cdn.lanqb.com/imgv3_m/ucenter2212/ucenter-bg.png');
	background-size:100% 133%;
	.baoguo{
		width: 456rpx;
		margin: 0rpx auto;
		padding-top:50rpx ;
		
	}
	.anniu{
		margin: 0 auto;
		width: 400rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 35rpx;
		background-color: #457eec;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		box-sizing: border-box;
		
	}
	.wenzi{
		width: 456rpx;
		height: 32rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #8c8c8c;
	}
}
.imgs{
	image{
		width: 344rpx;
		height: 190rpx;
		margin-bottom: 22rpx;
	
	}
}
.guihua{
	height: 130rpx;

	padding: 0rpx 10rpx 0rpx 30rpx;
	margin-bottom: 20rpx;
	background-color: #f6f8fa;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 20rpx;
	text{
		margin-right: 30rpx;
	}
	button{
		border-radius: 30rpx;
		
	}
}
.ys{
	align-items: center;
	height: 104rpx;
	font-size: 32rpx;
	border-bottom: 1px solid #eee;
	text{
		margin-right: 20rpx;
	}
}
.ys:last-child{
		border-bottom: none;
}
.imges{
	height: 140rpx;
	margin-top: 20rpx;
	image{
		width: 100%;
		height: 100%;
	}
}
.mubu{
	top: 95rpx;
	position: fixed;
	background-color: rgba(0, 0, 0, .4);
	width: 100%;
	height: 87vh;
	padding-top: 220rpx;
		z-index: 99;
	.user{
		width: 100%;
		height: 80%;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;
		position: relative;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.cha{
			position: absolute;
			top: 20rpx;
			right: 40rpx;
		}
	
		
	}
}
</style>
